Week 03 · AI Vision Lab

VS Code + Flask
AI 視覺入門

Visual Studio Code · Flask Web · MediaPipe · OpenCV · EAR Detection

阮文孟 1111310035 Python 3.12 MediaPipe Flask
PART 01 OpenCV 攝影機測試 · 環境建立
# 建立虛擬環境 python -m venv .venv # 啟用環境 (Windows) .venv\Scripts\activate # 安裝核心套件 pip install --upgrade pip pip install opencv-python Flask mediapipe ultralytics
攝影機 API
cv2.VideoCapture(0)
影像格式
BGR → RGB 轉換
開發環境
VS Code + .venv
環境建立 01
Screenshot 01 · VSCode Setup
⤢ double-click
環境建立 02
Screenshot 02 · Terminal
⤢ double-click
PART 02 手勢偵測 · Hand Detection
偵測目標
21 個手部關節點與線條
核心函式
mp_hands.Hands()
影像格式
BGR → RGB 轉換
應用場景
手勢控制、虛擬畫筆
# 安裝套件 pip install mediapipe opencv-python # 初始化手部偵測 mp_hands = mp.solutions.hands hands = mp_hands.Hands(min_detection_confidence=0.7)
手勢偵測 01
Screenshot 03 · Hand Landmarks
⤢ double-click
手勢偵測 02
Screenshot 04 · Hand Detection Live
⤢ double-click
PART 03 臉部網格 · Face Mesh
關鍵點數量
468 個 3D 面部關鍵點
進階功能
refine_landmarks 虹膜偵測
應用場景
AR 濾鏡、表情分析
核心模型
Face Landmarker
face_mesh = mp.solutions.face_mesh mp_face_mesh = face_mesh.FaceMesh( refine_landmarks=True, min_detection_confidence=0.5)
臉部網格 01
Screenshot 05 · Face Mesh Code
⤢ double-click
臉部網格 02
Screenshot 06 · Face Mesh Live
⤢ double-click
PART 04 手勢偵測 + Face Mesh · Combined
整合模型
Face Landmarker + Hand Landmarker
即時偵測
臉部網格 + 手部骨架同步
視窗標題
Combined Face-Hand AI Lab
Combined 01
Screenshot 07 · Combined Code
⤢ double-click
Combined 02
Screenshot 08 · Combined Live
⤢ double-click
PART 05 疲勞偵測原理 · EAR Algorithm
0.42
▲ AWAKE · EAR > 0.25
0.05
⚠ DROWSY · EAR < 0.2
EAR 公式
上下眼瞼 / 左右眼角比例
清醒判斷
EAR > 0.25
疲勞觸發
EAR < 0.2 且持續 > 1.5 秒
使用 Claude
10 分鐘自動完成
# EAR 計算核心 EYE_IDX = [33, 160, 158, 133, 153, 144] def calculate_ear(landmarks, eye_indices): v1 = np.linalg.norm(p[1]-p[5]) v2 = np.linalg.norm(p[2]-p[4]) h = np.linalg.norm(p[0]-p[3]) return (v1 + v2) / (2.0 * h) # 疲勞警告觸發 if avg_ear < 0.2 and duration > 1.5: cv2.putText(frame, "!!! DROWSY WARNING !!!", ...)
EAR AWAKE
Screenshot 09 · AWAKE State
⤢ double-click
EAR DROWSY
Screenshot 10 · DROWSY WARNING
⤢ double-click
Claude Error
Screenshot 11 · Claude Auto · Error
⤢ double-click
Claude 完成
Screenshot 12 · Claude Auto · Done
⤢ double-click
心得感想 · Reflection
學習心得

這堂課對我來說充滿了挑戰與成就感。起初,我在安裝 MediaPipe 3.12.2 版本時遇到了 AttributeError 的困難,但在不斷嘗試與修正代碼結構後,終於成功解決了問題。

看著畫面上的綠色網格精準地貼合在臉上,並能在閉眼時給出警示,我感到非常有成就感。這堂課不僅讓我學到了 AI 技術,更鍛煉了我在軟體開發中解決問題的能力,收穫非常豐富!